<template>
	<div class="game-container report-container">
		<div class="params">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="77px"
				label-suffix=":"
				class="flex-warp-container"
			>
				<el-form-item :label="`${$t('common.belong_merchant')}`">
					<el-select
						v-model="queryData.merchantId"
						size="medium"
						v-symbols
						clearable
						style="width: 180px"
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-if="isZk"
							:label="`${$t('system.all')}`"
							value="0"
						></el-option>
						<el-option
							v-for="item in merchantList"
							:key="item.id"
							:label="item.merchantName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="业务类型"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.bizType"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-for="(item, index) in bizTypeList"
							:key="index"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="操作类型"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.operationType"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-for="(item, index) in operationTypeList"
							:key="index"
							:label="item.desc"
							:value="item.name"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入" v-model="queryData.keywords">
						<el-select
							v-model="queryData.selectKey"
							slot="prepend"
							placeholder="请选择"
							class="input-with-select"
							@change="handleChange"
						>
							<el-option
								label="操作人"
								value="operator"
							></el-option>
							<el-option
								label="操作IP"
								value="operatorIp"
							></el-option>
						</el-select>
					</el-input>
				</el-form-item>
				<el-form-item
					label="关键词"
					class="flex-row-container"
					label-width="61px"
				>
					<el-input
						v-model="queryData.keyword"
						clearable
						:maxlength="100"
						v-input="{ name: 'symbols' }"
						size="medium"
						placeholder="请输入"
					></el-input>
				</el-form-item>
				<el-form-item label="操作时间" label-width="75px">
					<el-date-picker
						v-model="queryData.createdAt"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						format="yyyy-MM-dd HH:mm:ss"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						align="right"
					></el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						:loading="loading"
						:disabled="loading"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						:disabled="loading"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="view-container dealer-container">
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					style="width: 100%"
					:max-height="tableH"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						align="center"
						label="业务类型"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{ bizTypeMap[scope.row.bizType] || '-' }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="操作类型"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									operationTypeMap[scope.row.operationType] ||
									'-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="操作人"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.operator || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="操作IP"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.operatorIp || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="操作时间"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.operationTime || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						label="操作内容"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-button
								type="text"
								size="medium"
								@click="handleDetail(scope.row)"
							>
								查看详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
			<el-dialog
				title="查看详情"
				:visible.sync="dialogTableVisible"
				:destroy-on-close="true"
				center
			>
				<el-table
					v-loading="detailLoading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="detailList"
					style="width: 100%"
					:max-height="tableH"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						align="center"
						label="字段名称"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.fieldName || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="修改前"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.oldValue || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="修改后"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.operationType || '-' }}</span>
						</template>
					</el-table-column>
				</el-table>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import dayjs from 'dayjs'
const start = dayjs().startOf('day').valueOf()
const end = dayjs().endOf('day').valueOf()
export default {
	name: routerNames.systemOperationRecord,
	mixins: [list],
	data() {
		return {
			queryData: {
				merchantId: undefined,
				createdAt: [start, end],
				bizType: 'ALL',
				operationType: 'ALL',
				keywords: undefined,
				selectKey: 'operator',
				keyword: undefined
			},
			dataList: [],
			bizTypeList: [
				{
					label: '全部',
					value: 'ALL'
				},
				{
					label: '会员',
					value: 'MEMBER'
				},
				{
					label: '代理',
					value: 'PROXY'
				},
				{
					label: '游戏',
					value: 'GAME'
				},
				{
					label: '德州',
					value: 'TEXAS'
				},
				{
					label: '资金',
					value: 'FUND'
				},
				{
					label: '运营',
					value: 'OPERATE'
				},
				{
					label: '风控',
					value: 'WIND_CONTROL'
				},
				{
					label: '商户',
					value: 'MERCHANT'
				},
				{
					label: '系统',
					value: 'SYSTEM'
				}
			],
			operationTypeList: [],
			dialogTableVisible: false,
			detailLoading: false,
			detailList: [],
			bizTypeMap: {
				ALL: '全部',
				MEMBER: '会员',
				PROXY: '代理',
				GAME: '游戏',
				TEXAS: '德州',
				FUND: '资金',
				OPERATE: '运营',
				WIND_CONTROL: '风控',
				MERCHANT: '商户',
				SYSTEM: '系统'
			},
			operationTypeMap: {
				ALL: '全部',
				ADD: '新增',
				UPDATE: '修改',
				DELETE: '删除'
			}
		}
	},
	computed: {
		isZk() {
			return this.$store.getters.isZk
		},
		merchantList() {
			return this.$store.getters.merchantList || []
		}
	},
	created() {
		this.getSystemOperationTypeFunc()
	},
	methods: {
		getSystemOperationTypeFunc() {
			this.$api.getSystemOperationType().then((res) => {
				this.operationTypeList = res.data || []
			})
		},
		handleDetail(val) {
			this.detailLoading = true
			this.$api
				.getSystemRecordById({ id: val.id })
				.then((res) => {
					this.detailList = res.data || []
					this.detailLoading = false
					this.dialogTableVisible = true
				})
				.catch(() => {
					this.detailLoading = false
				})
		},
		handleChange(val) {
			this.queryData.keywords = undefined
		},
		loadData() {
			const [startTime, endTime] = this.queryData.createdAt || []
			this.loading = true
			const obj = {
				...this.queryData,
				beginTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				endTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			delete obj.createdAt
			if (obj.selectKey === 'operator') {
				obj.operator = obj.keywords
				obj.operatorIp = undefined
			} else {
				obj.operatorIp = obj.keywords
				obj.operator = undefined
			}
			delete obj.selectKey
			delete obj.keywords
			const params = {
				...this.getParams(obj)
			}
			this.$api
				.getSystemOperationRecords(params)
				.then((res) => {
					this.loading = false
					const { record, totalRecord } = res.data || {}
					this.dataList = Array.isArray(record)
						? Object.freeze(record)
						: []
					this.total = totalRecord || 0
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {
				merchantId: undefined,
				createdAt: [start, end],
				bizType: 'ALL',
				operationType: 'ALL',
				keywords: undefined,
				selectKey: 'operator',
				keyword: undefined
			}
			this.pageNum = 1
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.input-with-select {
	width: 100px;
}
</style>
